<template>
  <div id="home">
    <!-- 首页内容部分 -->
    <div class="content" id="page0">
      <!-- 文字部分 -->
      <div class="text" :style="{backgroundImage: 'url(' + URL + ')'}" >
        <h1>我本微末凡尘，却也心向天空</h1>
        <h1 class="info"> 
          你好，
          <br/>
          感谢你点开这个网页</h1>
      </div>
      <!-- 窗口导航-组件 -->
      <div class="windows" :style="{backgroundColor: '#' + color}">
        <four-window/>
      </div>
      <!-- 白天、夜间模式切换按钮 -->
      <div v-show="!isNight" class="day" @click="dayClick">正常模式</div>
      <div v-show="isNight" class="night" @click="nightClick">暗黑模式</div>
    </div>
    <!-- 技术分享-组件 -->
    <div class="content" id="page1">
      <blog/>
    </div>
    <!-- 项目经验-组件 -->
    <div class="content" id="page2">
      <project/>
    </div>
    <!-- 视频创作-组件 -->
    <div class="content" id="page3">
      <my-video/>
    </div>
    <!-- 兴趣爱好-组件 -->
    <div class="content" id="page4">
      <life/>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import FourWindow from '@/components/FourWindow'
import Blog from './blog/Blog'
import Project from './project/Project'
import MyVideo from './myVideo/MyVideo'
import Life from './life/Life'

export default {
  name: 'Home',
  data() {
    return {
      isNight: true,
      URL: 'https://wx3.sinaimg.cn/large/006yjJnHgy1gebtrjxe4aj318y0u0kjm.jpg',
      urlday: 'https://wx3.sinaimg.cn/large/006yjJnHgy1gebtrjxe4aj318y0u0kjm.jpg',
      urlnight: 'https://wx4.sinaimg.cn/large/006yjJnHgy1gebtrr6oazj31900u0e83.jpg',
      color: 'fff',
      colorday: 'fff',
      colornight: '000',
    }
  },
  components: {
    FourWindow,
    Blog,
    Project,
    MyVideo,
    Life
  },
  provide() {
    return {
      home: this,
    }
  },
  created() {
    this.$store.dispatch('changeNight')
  },
  methods: {
    silde(num) {
      num++
      var PageId = document.querySelector('#page' + num)
      window.scrollTo({
        'top': PageId.offsetTop,
        'behavior': 'smooth'
      })
    },
    nightClick() {
      this.$store.dispatch('changeDay')
      this.isNight = this.$store.state.isNight
      this.URL = this.urlnight
      this.color = this.colornight
    },
    dayClick() {
      this.$store.dispatch('changeNight')
      this.isNight = this.$store.state.isNight
      this.URL = this.urlday
      this.color = this.colorday
    }
  }
}
</script>

<style scoped>
  #home {
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .content {
    margin: 0;
    padding: 0;
    width: 100%;
    height: calc(100vh);
    display: flex;
  }
  .day, .night {
    font-size: 18px;
    font-weight: 600;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
  }
  .day {
    color: #fff;
  }

  .text {
    flex: 61%;
    background-size: auto 110%;
    color: #fff;
    font-size: 30px;
    text-align: center;
    letter-spacing: 10px;
    cursor: default;
  }

  .info {
    float: right;
    margin-right: 120px;
    height: 600px;
    writing-mode: vertical-lr;
    font-size: 30px;
    cursor: default;
    line-height: 60px;
    text-align: left;
    font-weight: 100;
    color: #fff;
  }

  .windows {
    flex: 39%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: url(../assets/img/window.jpg);
    background-size: 100% auto;
    background-position: -7px 0; */
  }
</style>